<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>故事引入</title>
    <link rel="stylesheet" href="../../css/story_leadin.css" />
    <script src="../../plugins/jquery-3.6.0.min.js"></script>
    <link href="../../plugins/video-js.min.css" rel="stylesheet" />
    <script src="../../plugins/video.min.js"></script>
  </head>

  <body>
    <div id="rootContainer">
      <!-- 视频的播放以及容器 -->
      <div id="videoContainer">
        <video
          id="video"
          style="width: 100%; height: 100%"
          class="video-js"
          controls
          muted
          preload="auto"
          autoplay
        >
          <source src="../../videos/L2/L2-故事引入.mp4" type="video/mp4" />
        </video>
      </div>
      <!-- 拟定的视频的控制条 -->
      <div class="controlbar">
        <ul id="video-controls" class="controls">
          <!-- <li><button id="fs" type="button">Fullscreen</button></li> -->
        </ul>
      </div>
      <!-- 顶端的返回跳的设计 -->
      <div id="backbar">
        <div id="backbutton">&lt</div>
        <div id="backtitle">故事引入</div>
        <div id="playstatus" class="playstatus_pause"></div>
      </div>
      <!-- 正在加载中的页面 -->
      <div id="loadingbox">
        <!-- <img src="../../images/loding.png" alt="加载中" /> -->
        <div id="bordeImg">
          <div id="centerimg"></div>
        </div>
        <!-- 第二版的设计图中‘故事引入’四个字在中间的位置。 -->
        <!-- <div id="pageText">故事引入</div> -->
      </div>
      <!-- 视频播放完成之后的面板 -->
      <div class="shadowPanel">
        <div class="controlbox">
          <div class="replay">
            <img src="../../images/再看一遍.png" alt="再看一遍" />
            <p>再看一遍</p>
          </div>
          <div class="nextItem">
            <img src="../../images/下一环节.png" alt="下一环节" />
            <p>下一环节</p>
          </div>
        </div>
      </div>
    </div>
  </body>

  <script type="module">
    import { modifyCourseStatus } from '../../js/modify_course_status.js';
    $(function () {
      // 一些初试的设置
      let DESIGN_WIDTH = 1334;
      let DESIGN_HEIGHT = 750;
      document.documentElement.style.fontSize =
        (window.innerHeight * 12) / DESIGN_WIDTH + 'px';

      // 利用JavaScript判断设备处于槐树屏幕的状态，并对css作相应的处理。
      let width = window.innerWidth;
      let height = window.innerHeight;
      // 获取跟容器的DOM元素
      let rootContainer = $('#rootContainer');
      // 视频透明蒙版的DOM元素
      let shadowPanel = $('.shadowPanel');
      // 初始的时候影藏视频的播放和下一环节控制
      shadowPanel.hide();

      let control_bar = $('.controlbar');

      // 获取和设置顶部的返回区域
      let back_bar = $('#backbar');
      back_bar.css({
        height: (height * 75) / DESIGN_HEIGHT,
      });
      back_bar.children('#backbutton').css({
        height: (height * 75) / DESIGN_HEIGHT,
        'line-height': (height * 75) / DESIGN_HEIGHT + 'px',
      });
      back_bar
        .children('#backbutton')
        .css('width', back_bar.children('#backbutton').height());
      back_bar.children('#backbutton').on('click', function (e) {
        e.stopPropagation();
        location.href = '../../index.html';
      });
      back_bar.children('#playstatus').css({
        height: (height * 75) / DESIGN_HEIGHT,
      });
      back_bar
        .children('#playstatus')
        .css('width', back_bar.children('#playstatus').height());

      // 获取加载框的DOM元素
      let loadingbox = $('#loadingbox');
      let fullscreen = document.getElementById('fs');

      // 给播放器添加播放和结束时间监听
      let video = $('#video');
      console.log('video', video);
      video.each(function (key, item) {
        console.log('key', key);
        let loading = video.get(key).addEventListener('waiting', function (e) {
          console.log('视频暂停了');
        });
        let loaded = video
          .get(key)
          .addEventListener('canplaythrough', function (e) {
            setInterval(function (i) {
              if ($('#centerimg').width() < $('#bordeImg').width() * 0.744) {
                $('#centerimg').css({
                  width: $('#centerimg').width() + 3,
                });
              }
            }, 10);
            setTimeout(() => {
              loadingbox.css('display', 'none');
              document.getElementById('backtitle').innerHTML = '';
            }, 600);
          });
        let play = video.get(key).addEventListener('play', function (e) {
          console.log('视频正在播放中');
        });
        let ended = video.get(key).addEventListener('ended', function (e) {
          shadowPanel.show();
          modifyCourseStatus(
            2,
            {
              story_finish: true,
              principle_finish: false,
              labor_finish: false,
              report_finish: false,
            },
            { second_lock: false, third_lock: true, fourth_lock: true }
          );
        });
      });

      // 获取再看一遍的按钮
      let replay = $('.replay');
      replay.bind('click', function (e) {
        console.log(e);
        video.trigger('play');
        shadowPanel.hide();
      });

      let nextItem = $('.nextItem');
      nextItem.bind('click', function (e) {
        window.location.replace('./principle_leadin_02.html');
        shadowPanel.hide();
      });

      // 利用JavaScript强制系统浏览器横屏显示;
      if (width < height) {
        rootContainer.height(width);
        rootContainer.width((width * DESIGN_WIDTH) / DESIGN_HEIGHT);
        rootContainer.css('transform', 'rotate(90deg)');
        rootContainer.css('transform-origin', '0% 0%');
        rootContainer.css('left', width);
        rootContainer.css('top', (height - rootContainer.width()) / 2);
      } else {
        rootContainer.height(height);
        rootContainer.width((height * DESIGN_WIDTH) / DESIGN_HEIGHT);
        rootContainer.css('transform', 'none');
        rootContainer.css('transform-origin', '0% 0%');
        rootContainer.css('left', (width - rootContainer.width()) / 2);
        rootContainer.css('top', 0);
      }

      // 利用JavaScript解决，强制横屏之后用户开启跟随旋转的按钮的情况。
      let evt =
        'onorientationchange' in window ? 'orientationchange' : 'resize';
      window.addEventListener(
        evt,
        function () {
          setTimeout(() => {
            let width = document.documentElement.clientWidth;
            let height = document.documentElement.clientHeight;
            let rootContainer = $('#rootContainer');
            if (width > height) {
              rootContainer.height(height);
              rootContainer.width((height * DESIGN_WIDTH) / DESIGN_HEIGHT);
              rootContainer.css('transform', 'none');
              rootContainer.css('transform-origin', '0% 0%');
              rootContainer.css('left', (width - rootContainer.width()) / 2);
              rootContainer.css('top', 0);
            } else {
              rootContainer.height(width);
              rootContainer.width((width * DESIGN_WIDTH) / DESIGN_HEIGHT);
              rootContainer.css('transform', 'rotate(90deg)');
              rootContainer.css('transform-origin', '0% 0%');
              rootContainer.css('left', width);
              rootContainer.css('top', (height - rootContainer.width()) / 2);
            }
          }, 500);
        },
        false
      );
    });
  </script>
</html>
